﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="container" style="min-width:400px;height:400px"></div>
</body>
<jsp:include page="include.jsp"></jsp:include>
<script type="text/javascript">
Highcharts.setOptions({
	global: {
			useUTC: false
	}
});
function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container', {
	chart: {
			type: 'spline',
			marginRight: 10,
			events: {
					load: function () {
							var series = this.series[0],
									chart = this;
							activeLastPointToolip(chart);
							setInterval(function () {
								
								$.ajax({
									type: 'post',
									url:'${pageContext.request.contextPath}/area24/Method_json',
									dataType:'text', 
									data:{},
									success:function(data){
										var x,y;
										var obj = JSON.parse(data);
										x = (new Date()).getTime();
										y = (obj.jData.heapMemoryUsageUsed*1.0)/(obj.jData.heapMemoryUsageMax*1.0)*100;
										console.log(y);
										series.addPoint([x, y], true, true);
										activeLastPointToolip(chart);
									},
									error:function(data){
									
									}
									
								});
							}, 1000);
					}
			}
	},
	title: {
			text: 'java虚拟机堆内存的数据分析'
	},
	xAxis: {
			type: 'datetime',
			tickPixelInterval: 150
	},
	yAxis: {
			title: {
					text: null
			}
	},
	tooltip: {
			formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
			}
	},
	legend: {
			enabled: false
	},
	series: [{
			name: '堆内存百分比',
			data: (function () {
					// 生成随机值
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -19; i <= 0; i += 1) {
							data.push({
									x: time + i * 1000,
									y: Math.random()
							});
					}
					return data;
			}())
	}]
});
</script>

</html>